import React from 'react'
import { Form, Input, Select } from 'antd';

import { verificationPhone } from 'Api/api';
import Http from 'utils/Http';
import './verify.scss'
const loginBtnBg = require('assets/account/btn-bg@2x.png')
const Wechat = require('assets/account/Wechat@2x.png')
const { Option } = Select;
interface VerifyProps {
    phone: string,
    setPhone: (val:string)=>any,
    setStep: (val:string)=>any,
    setHistoryStep: (val:string)=>any
}


function VerifyAccount(props: VerifyProps) {
    const { phone, setPhone, setStep,setHistoryStep } = props;
    const prefixSelector = (
        <Select defaultValue='86' style={{
            width: 70
        }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    const verifyAccount = (val: any) => {
        Http.post(`${verificationPhone}?phone=${val.phone}`).then(res => {
            setPhone(val.phone);
            setHistoryStep('1');
            if (res.data) {
                setStep('4');
            }else{
                setStep('2')
            }
        })
    }
    return (
        <div className='verify-box animate-route'>
            <p className='verify-box-title'>解锁新技能,上天赋树</p>
            <div className='verify-form'>
                <p className='verify-form-title'>
                    免费注册或登录
                </p>
                <Form
                    name='verify'
                    onFinish={verifyAccount}
                    initialValues={{
                        phone: phone
                    }}
                >
                    <Form.Item
                        name="phone"
                    >
                        <Input className='verify-form-account' addonBefore={prefixSelector} style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item>
                        <button className='verify-btn' type='submit'>
                            <img src={loginBtnBg} alt="登录按钮背景" />
                                继续</button>
                    </Form.Item>
                    <Form.Item>
                        <div className='verify-mode'>
                            <p>社交账号登录</p>
                            <div onClick={()=>{
                                setStep('5')
                            }}>
                                <img src={Wechat} alt="登录按钮背景" className='wechat' />
                                <span>微信登录</span>
                            </div>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default VerifyAccount
